<template>
    <div class="search">
        <el-row>
            <!-- <el-col :span="20"> -->
                <el-form ref="ruleForm"
                    :rules="rules"
                    :model="ruleform"
                    label-width="100px">
                    <div class="top"
                        :class="{ goupdown: isshowbody ,godiv1:longScreen,godiv2:!longScreen}">
                    <slot name="top"></slot>
                    <slot name="center"></slot>
                    
                    </div>
                    <div class="foot">
                    <slot name="foot"></slot>
                    </div>
                </el-form>
            <!-- </el-col> -->
            <!-- <el-col :span="4"> -->
                <el-button type="primary"
                   @click.native="$emit('doQuery')"
                   size="small"
                   :disabled="disabled">搜索</el-button>
                <el-button 
                    @click="$emit('doReset')"
                    class="resletBtn"
                    size="small"
                    :disabled="disabled">重置</el-button>
                    <el-button  v-if="isshowhigh && Object.values(this.ruleform).slice(0, -4).length > 4"
                        type="text"
                        class="heigh-box"
                        @click="doToggle">{{ isshowbody ? '收起' : '高级搜索' }}</el-button>
            <!-- </el-col> -->
        </el-row>
    </div>
  </template>
  <script>
  export default {
      name: 'search',
      props: {
          hashigh: {
              default: true,
          },
          hasform: {
              default: true,
          },
          rules: {
              type: Object,
              default: () => {},
          },
          ruleform: {
              type: Object,
              default: () => {},
          },
          disabled: {
              default: false,
          },
      },
      data() {
          return {
              isshowbody: false,
              isshowhigh: false,
              longScreen: true,
          };
      },
      created() {
      },
      mounted() {
          if (window.innerWidth < 1500) {
              this.isshowhigh = true;
              this.longScreen = false;
          } else {
              this.isshowhigh = this.hashigh;
          }
      },
      methods: {
          doToggle() {
              this.isshowbody = !this.isshowbody;
              this.$emit('doToggle');
          },
      },
  };
  </script>
  
  <style scoped lang="scss">
  .search {
    //   padding-bottom: 9px;
    .el-row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
    }
    .el-col-20{
        width: 100% !important;
    }
    .el-col-4{
        text-align: right;
    }
    ::v-deep .el-input__suffix{
        right: 14px !important;
    }
      ::v-deep .el-input__inner {
          width: 95%;
          border-radius: 0 2px 2px 0;
          
      }
     
      .se:empty {
          display: none;
      }
      // 单选按钮
      ::v-deep .el-radio__inner {
          width: 22px;
          height: 22px;
      }
      ::v-deep .el-radio__inner::after {
          width: 9px;
          height: 9px;
      }
      .goupdown {
          max-height: 220px !important;
      }
      .heigh-box{
        width: 60px;
      }
      .godiv1 {
          opacity: 1;
          max-height: 40px;
          overflow: hidden;
          // transition-duration: 0.05s;
          // transition-property: all;
          // transition-timing-function: ease-in-out;
          // transition-delay: 0s;
      }
      .godiv2 {
          opacity: 1;
          max-height: 47px;
          overflow: hidden;
          // transition-duration: 0.05s;
          // transition-property: all;
          // transition-timing-function: ease-in-out;
          // transition-delay: 0s;
      }
      ::v-deep .el-form-item {
          margin: 10px 0px 0;
          display: inline-block;
          padding: 0;
          .el-select,
          .el-input {
              width: 100%;
          }
      }
      .top,
      .foot {
        //   border-top: 1px solid #ebeef5;
      }
      ::v-deep .top .el-form-item {
          width: 25%;
      }
      .foot:empty {
          border-top: none !important;
      }
      @media screen and (max-width: 1400px) {
          ::v-deep .top .el-form-item {
              width: 30%;
          }
      }
      ::v-deep .el-form-item__error {
          position: absolute;
          left: 101%;
          top: 30%;
          white-space: nowrap;
      }
  }
  </style>
  